import 'dart:async';

import 'package:flutter/material.dart';

void main() => runApp(RootApp());

// 定义根目录Wigdget
class RootApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // 根视图
    return MaterialApp(
      theme: ThemeData(primaryColor: Colors.grey[200]),
      home: HomePage(),
    );
  }
}

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  String result = "--";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('测试底部弹框'),
        ),
        body: Column(
          children: [
            OutlineButton(
                child: Text("点击打开弹框"),
                onPressed: () {
                  showBottomSheet();
                }),
            Text(result)
          ],
        ));
  }

  void showBottomSheet() {
    showModalBottomSheet(
        context: context,
        builder: (BuildContext context) {
          return buildshowModalBottomSheet(context);
        });
  }

  Widget buildshowModalBottomSheet(BuildContext context) {
    return Container(
      height: 300,
      child: Column(
        children: [
          buildItem("微信登录", "images/3.0/logo.jpg", onTap: () {
            setState(() {
              result = "微信登录";
            });
          }),
          Divider(),
          buildItem("微博登录", "images/3.0/logo.jpg", onTap: () {
            setState(() {
              result = "微博登录";
            });
          }),
          Divider(),
          buildItem("QQ登录", "images/3.0/logo.jpg", onTap: () {
            setState(() {
              result = "QQ登录";
            });
          }),
          Divider(),
          buildItem("密码登录", "images/3.0/logo.jpg", onTap: () {}),
          Container(height: 8, color: Colors.grey[300]),
          InkWell(
            onTap: () {
              Navigator.of(context).pop();
            },
            child: Container(
              height: 44,
              child: Text("取消"),
              alignment: Alignment.center,
            ),
          ),
        ],
      ),
    );
  }

  Widget buildItem(String title, String imagePath, {Function onTap}) {
    return InkWell(
      onTap: () {
        // 关闭弹窗
        Navigator.of(context).pop();
        if (onTap != null) {
          onTap();
        }
      },
      child: Container(
        height: 40,
        child: Row(
          mainAxisAlignment: MainAxisAlignment.center,
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
            Image.asset(imagePath, width: 20, height: 20),
            SizedBox(
              width: 10,
            ),
            Text(title),
          ],
        ),
      ),
    );
  }
}
